<template>
  <div class="notify-collect">
    <div
      v-if="firstLoading"
      slot="placeholder"
      style="background: #fff; padding: 20px 20px 30px; margin-top: 16px"
    >
      <a-skeleton avatar active />
    </div>
    <div v-else>
      <div
        v-if="!list.length"
        style="padding: 30px 0; background: #fff; margin-top: 16px"
      >
        <a-empty
          description="暂无数据"
          :image="require('~/assets/images/nodata.png')"
        />
      </div>
      <div v-else>
        <div v-for="item in list" :key="item.id" class="notify-modal">
          <HeadAvatar
            :point="item.haveRead === '0'"
            :img="item.sourceAvatar"
            :to="`/user/${item.sourceUserId}`"
          />
          <div class="right-info">
            <div class="info">
              <div class="comment">
                <p>
                  <nuxt-link
                    target="_blank"
                    class="name"
                    :to="`/user/${item.sourceUserId}`"
                    >{{ item.sourceNickname }}</nuxt-link
                  >
                  收藏了你的文章
                  <nuxt-link target="_blank" :to="`/post/${item.articleId}`">{{
                    item.articleTitle
                  }}</nuxt-link>
                </p>
                <p class="time">2天前</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import notify from '~/mixin/notify'
export default {
  name: 'NotifyCollect',
  mixins: [notify],
  data () {
    return {
      itemType: '2'
    }
  },
  head () {
    return {
      title: '收藏消息-Gimishare'
    }
  }
}
</script>

<style scoped lang="less">
.notify-collect {
  .notify-modal {
    background: #fff;
    margin-top: 12px;
    padding: 20px;
    display: flex;
    .right-info {
      padding-left: 20px;
      width: 0;
      flex: 1;
      .info {
        display: flex;
        .comment {
          flex: 1;
          width: 0;
          p {
            .name {
              color: #000;
            }
            &.time {
              color: #999;
              margin-top: 4px;
            }
          }
        }
      }
    }
  }
}
</style>
